<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue";
import { useList } from "@/hooks/page";
import {
  guider_info_product_header_api,
  guider_info_product_list_api,
} from "@/package/guider/api/guider_didi";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import ListEmpty from "@/components/list/empty.vue";
import ListMore from "@/components/list/more.vue";
import IndexProductItem from "./index-product-item.vue";

export default defineComponent({
  components: { PageSticky, ListEmpty, ListMore, IndexProductItem },
  props: {
    id: { type: String, required: true },
    isTeam: Boolean,
  },
  setup(props) {
    const tempData = { queryData: { guider_id: "", work_id: "" } };
    if (props.isTeam) {
      tempData.queryData.work_id = props.id;
    } else {
      tempData.queryData.guider_id = props.id;
    }

    guider_info_product_header_api(tempData.queryData).then((resp) => {
      typeList.value = resp.items;
      if (typeList.value.length > 0) typeClick(0);
    });

    const queryData = reactive({ cate_id: "" });
    const typeList = ref<any[]>([]);
    const typeClick = (index: number) => {
      queryData.cate_id = typeList.value[index].id;
      reloadList();
    };

    const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
      useList({ page: 1, page_size: 10 }, (query) => {
        return guider_info_product_list_api({
          ...query,
          ...tempData.queryData,
          ...toRaw(queryData),
        });
      });

    const productClick = (id: string) => {
      Router.navigateTo(`/package/mall/pages/jps/detail?id=${id}`);
      // Router.navigateToMiniProgram(
      //   "wx5214fcfbdf6da440",
      //   `/package/product/pages/detail/detail2?id=${id}`
      // );
    };

    return {
      queryData,
      typeList,
      typeClick,
      listData,
      listStatus,
      listLoadMore,
      loadMoreList,
      productClick,
    };
  },
});
</script>

<template>
  <scroll-view
    class="product"
    scroll-y
    @scroll="listLoadMore = true"
    @scrolltolower="loadMoreList"
  >
    <ListEmpty v-if="typeList.length === 0" />
    <template v-else>
      <PageSticky>
        <scroll-view
          class="product-type"
          scroll-x
          enhanced
          :show-scrollbar="false"
        >
          <view class="product-type-space"></view>
          <view
            class="product-type-item"
            :class="{ 'product-type-active': queryData.cate_id === i.id }"
            v-for="(i, d) of typeList"
            :key="i.id"
            @click="typeClick(d)"
          >
            {{ i.name }}
          </view>
        </scroll-view>
      </PageSticky>

      <view class="product-data">
        <view
          class="product-data-item"
          v-for="i of listData"
          :key="i.id"
          @click="productClick(i.id)"
        >
          <IndexProductItem :info="i" />
        </view>
      </view>
      <ListMore v-if="listLoadMore" :status="listStatus" safeAreaInsetBottom />
    </template>
  </scroll-view>
</template>

<style lang="scss">
.product {
  position: relative;
  height: 100%;

  .product-type {
    height: 88rpx;
    white-space: nowrap;
  }

  .product-type-space,
  .product-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .product-type-space {
    width: 30rpx;
  }

  .product-type-item {
    padding: 0 24rpx;
    margin-top: 16rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 56rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }

  .product-type-active {
    color: #ff7900;
    background-color: #fff1e5;
  }

  .product-data {
    padding-top: 30rpx;
  }

  .product-data-item {
    margin: 0 30rpx 30rpx;
  }
}
</style>